<!-- <template>
	<navigator url="/pages/people/index" hover-class="navigator-hover">
		<button class="enter" @click="login">
			人员信息录入
		</button>
	</navigator>
	<navigator url="/pages/guest/index" hover-class="navigator-hover">
		<button class="register" @click="register">
			访客登记申请
		</button>
	</navigator>

</template>

<script>
	import {
		request
	} from '../../api/request';
	export default {
		data() {
			return {}
		},
		created() {
			// this.login();
		},
		methods: {
			login() {
				if (wx.getUserProfile) {
					console.log('可以用');
					wx.getUserProfile({
						lang: 'zh_CN',
						desc: '用于完善会员资料',
						success(user) {
							console.log('11', user);
						},
						fail(res) {
							console.log('22', res);
						}
					})

				}
				// 		wx.login({
				// 		  success (res) {
				// 		    if (res.code) {
				// 		      //发起网络请求
				// 			  request({
				// 				  url:`/api/v1/common/authorize?js_code=${res.code}`,
				// 				  method:"GET",
				// 			  }).then(res=>{
				// 				  if(res.code==1){
				// 					  let result=res.data;
				// 					  console.log(result.openid);
				// 					  wx.setStorageSync('openId',result.openid)
				// 				  }
				// 			  })

				// 		    } else {
				// 		      console.log('登录失败！' + res.errMsg)
				// 		    }
				// 		  }
				// 		})
			}
		},
	}
</script>

<style scoped>
	.enter,
	.register {
		width: 100%;
		line-height: 300rpx;
		color: #000;
		border-radius: 10rpx;
		text-align: center;
	}

	.enter {
		padding: 20rpx auto;
	}

	.register {
		padding: 20rpx auto;
	}
</style> -->

<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="alignmentFormData" label-width="80px">
				<uni-forms-item label="人员类型" required name="type">
					<uni-data-checkbox v-model="alignmentFormData.type" :localdata="type" />
				</uni-forms-item>
				<div v-if="alignmentFormData.type==1">
					<uni-forms-item label="人员姓名" required name="name">
						<uni-easyinput v-model="alignmentFormData.name" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" required name="idNumber">
						<uni-easyinput v-model="alignmentFormData.idNumber" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="手机号码" required name="mobile">
						<uni-easyinput v-model="alignmentFormData.mobile" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别">
						<uni-data-checkbox style="padding: 6px 0;" v-model="alignmentFormData.gender"
							:localdata="genders" />
					</uni-forms-item>
					<uni-forms-item label="人员分组">
						<multiple-select v-model="alignmentFormData.groupIds" multiple dataKey="name" dataValue="id"
							:localdata="gropsList" @change="change"></multiple-select>
						<view class="tips" v-if="groupMessage">{{ groupMessage }}</view>
					</uni-forms-item>
					<uni-forms-item label="照&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片">
						<uni-file-picker v-model="avatarBytes" file-mediatype="image" mode="grid" file-extname="png,jpg"
							:limit="1" @select="select" />
						<view class="tips" v-if="photoMessage">{{ photoMessage }}</view>

					</uni-forms-item>
				</div>
				<div v-else>
					<uni-forms-item label="访客姓名" required name="name">
						<uni-easyinput v-model="alignmentFormData.name" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="身份证号" required name="idNumber">
						<uni-easyinput v-model="alignmentFormData.idNumber" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="手机号码" required name="mobile">
						<uni-easyinput v-model="alignmentFormData.mobile" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别" required>
						<uni-data-checkbox style="padding: 6px 0;" v-model="alignmentFormData.gender"
							:localdata="genders" />
					</uni-forms-item>
					<uni-forms-item label="访客分组" required>
						<multiple-select v-model="alignmentFormData.groupIds" multiple dataKey="name" dataValue="id"
							:localdata="gropsList" @change="change"></multiple-select>
						<view class="tips" v-if="groupMessage">{{ groupMessage }}</view>
					</uni-forms-item>
					<uni-forms-item label="照&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片" required>
						<uni-file-picker v-model="avatarBytes" file-mediatype="image" mode="grid" file-extname="png,jpg"
							:limit="1" @select="select" />
						<view class="tips" v-if="photoMessage">{{ photoMessage }}</view>

					</uni-forms-item>
					<uni-forms-item label="来访时间" required>
						<uni-datetime-picker v-model="alignmentFormData.dateTimeFrom" type="datetime" />
						<view class="tips" v-if="fromMessage">{{ fromMessage }}</view>
					</uni-forms-item>
					<uni-forms-item label="截止时间" required>
						<uni-datetime-picker v-model="alignmentFormData.dateTimeTo" type="datetime" />
						<view class="tips" v-if="toMessage">{{ toMessage }}</view>
					</uni-forms-item>
					<uni-forms-item label="来访目的">
						<uni-easyinput type="textarea" v-model="alignmentFormData.guestPurpose" placeholder="请输入" />
					</uni-forms-item>
				</div>


			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>
<script>
	import multipleSelect from '@/component/multipleSelect.vue'

	import {
		request,
		baseURL
	} from '../../api/request';
	export default {
		data() {
			return {
				gropsList: [],
				alignmentFormData: {
					openId: wx.getStorageSync('openId'),
					type: 1,
					name: '',
					gender: 2,
					mobile: '',
					idNumber: "",
					groupIds: [],
					avatarBytes: "",
					dateTimeFrom: "",
					dateTimeTo: "",
				},
				avatarBytes: "",
				photoMessage: "",
				groupMessage: "",
				genders: [{
					text: '男',
					value: 2,
				}, {
					text: '女',
					value: 1,
				}],
				type: [{
						text: "业主",
						value: 1,
					},
					{
						text: "访客",
						value: 2,
					}
				],
				rules: {
					type: {
						rules: [{
							required: true,
							errorMessage: '类型不能为空'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
				},


			}
		},
		components: {
			'multiple-select': multipleSelect
		},
		created() {
			this.getGroupList();
		},
		methods: {
			getGroupList() {
				request({
					url: '/api/v1/people-group/select',
					method: "POST"
				}).then(res => {
					console.log(res);
					this.gropsList = res.data
				})
			},
			change(value) {
				console.log('e:', value);
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					request({
						url: "/api/v1/people-info",
						method: "POST",
						data: this.alignmentFormData
					}).then(res => {
						if (res.code == 1) {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			select(e) {
				uni.uploadFile({
					url: baseURL + '/api/v1/common/upload',
					filePath: e.tempFilePaths[0],
					name: 'files',
					success: (res) => {
						let result = JSON.parse(res.data).data[0]
						console.log(result);
						this.alignmentFormData.avatarBytes = result;
						uni.showToast({
							title: '上传成功'
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.uni-forms-item__content {
		margin-top: 5px;
	}

	.example {
		padding: 15px;
		height: 100vh;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.tips {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
	}
</style>